|
radio单选按钮，checkbox复选按钮的样式真的不能修改吗？？？？？
input[type="radio"],input[type="checkbox"] {
border: 6px solid black;
}上面的代码相信大家都有测试过。不生效，而且看了很多文章，都告诉我们单选按钮，复选按钮的样式不能修改。但是，真的这样嘛？答案是NO, 可以修改的 习惯真的可怕，一直觉得简单，从来没有去查找过，今天过看了下官方文档才发现，介绍的这么清楚，只是我们没有去了解。今天看了radio的官方文档， 才知识radio的默认样式是可以修改的 官方说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio 默认情况下，单选按钮（和 复选框）使用这些控件的操作系统本机样式设置样式。通过指定 appearance: none，您可以完全删除本机样式，并为其创建自己的样式。看到上面的话，大家就明白了。设置了appearance: none后，我们就可以修改radio或checkbox的样式了 代码如下： input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
outline: none;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
}朋友们，快测试下吧。注：不过，我们是否就使用appearance:none，然后来修改radio等的默认样式 嘛？ NO， NO， NO 因为appearance:none样式有兼容性问题（官方文档有说明） 兼容性说明：如果要使用该appearance属性，则应非常仔细地对其进行测试。尽管大多数现代浏览器都支持它，但是其实现方式却千差万别。在较旧的浏览器中，即使关键字 none 在不同的浏览器中也不具有相同的效果，有些甚至根本不支持它。在最新的浏览器中，差异较小所以，虽然默认样式可以修改，但是最好的方法还是自定义样式。 下篇文章介绍：radio单选按钮的自定义样式方法 |
|
|
公众号
